<template>
    <div class="login-warp">
        <div class="login-bg" :style="{'background':bgColor}">
            <div class="topbar">
                <topbar-back :isBackIcon="true" color="#fff" @onBack="onBack"></topbar-back>
            </div>
            <h5 class="title">头条看点</h5>
        </div>
        <div class="login-form">
            <login-form @onLogin="onLogin"></login-form>
        </div>
    </div>
</template>

<script>
import TopbarBack from '../Common/Topbar/Back'
import LoginForm from './Item'
export default {
    name: 'LoginWarp',
    components: {
        TopbarBack,
        LoginForm
    },
    methods: {
        onLogin(user,pass) {
            this.$emit('onLogin',user,pass)
        },
        onBack() {
            this.$store.commit('setAnimate','turn-off')
            this.$router.push('/mine')
        }
    },
    computed: {
        bgColor() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].bgColor
        }
    }
}
</script>

<style scoped>
.login-warp .login-bg .topbar{
    padding:0.2rem;
}
.login-warp .login-bg .title{
    padding:1rem 0;
    font-size:0.6rem;
    color:#fff;
    letter-spacing:0.02rem;
    text-align:center;
}
.login-warp .login-form{
    width:100%;
    padding:0 0.3rem;
}
</style>